<template>
  <div class="containers">
    <template>
        <div class="canvas" ref="canvas"></div>
    </template>
  </div>
</template>

<script>
// 引入相关的依赖
import BpmnViewer from 'bpmn-js/lib/NavigatedViewer'
// import BpmnViewer from 'bpmn-js/lib/Viewer'
import {
  newDiagram
} from './newDiagram' // 这里是直接引用了xml字符串
export default {
  name: 'bpmnViewer',
  props: {
    xml: {
      type: String,
      default: ''
    }
  },
  mounted() {
    this.init()
  },
  data() {
    return {
      viewer: null,
      container: null,
      canvas: null
    }
  },
  methods: {
    init() {
      // 获取到属性ref为“canvas”的dom节点
      const canvas = this.$refs.canvas
      // 建模
      this.viewer = new BpmnViewer({
        container: canvas
      })
      this.createNewDiagram()
    },
    async createNewDiagram() {
      try {
        const result = await this.viewer.importXML(this.xml || newDiagram)
        const { warnings } = result
        if (warnings.length > 0) {
          console.error(warnings)
        } else {
          this.success()
          var canvas = this.viewer.get('canvas')
          canvas.zoom('fit-viewport')
          // const allShapes = this.viewer.get('elementRegistry').getAll()
          // console.log(allShapes)
        }
      } catch (err) {
        console.log(err.message, err.warnings)
      }
    },
    success() {
      // console.log('创建成功!')
    }
  }
}
</script>
<style scoped>
.containers{
	position: absolute;
	background-color: #ffffff;
	width: 100%;
	height: 100%;
    overflow: auto;
}
.canvas{
	width: 100%;
	height: 100%;
}
.panel{
	position: absolute;
	right: 0;
	top: 0;
	width: 300px;
}
.mercury{
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  position: absolute;
}
</style>
